import { TextArea, Image } from '@douyinfe/semi-ui';
import deleteIcon from "@/assets/images/imageEdit/delete.svg";
import styles from '../index.module.scss';

/**
 * 参考提示词区域组件
 * @param {Object} props
 * @param {string} props.placeholder - 占位符文本
 * @param {Object} props.heights - 高度配置
 * @param {string} props.promptText - 提示词文本
 * @param {Function} props.setPromptText - 设置提示词文本的函数
 */
function ReferencePromptSection({ 
  placeholder = '请在此输入提示词，描述图像内容...', 
  heights,
  promptText,
  setPromptText
}) {
  return (
    <>
      <div className={styles.titleSection}>参考提示词</div>
      <div 
        className={`${styles.area} ${styles.areaWithPadding}`}
        style={{ maxHeight: heights.textArea }}
      >
        <TextArea 
          placeholder={placeholder}
          value={promptText}
          onChange={(value) => setPromptText?.(value)}
        />
        <Image 
          className={styles.img} 
          src={deleteIcon} 
          preview={false} 
          draggable={false}
          onClick={() => setPromptText?.('')}
        />
      </div>
    </>
  );
}

export default ReferencePromptSection;